Kattava opas selainlaajennusten kehitykseen Manifest V3:lla, joka kattaa keskeiset JavaScript-rajapinnat, siirtymästrategiat ja parhaat käytännöt.
Selainlaajennusten kehitys: Manifest V3:n ja JavaScript-rajapintojen hallinta
Selainlaajennukset tarjoavat tehokkaan tavan parantaa ja mukauttaa selauskokemusta. Ne antavat kehittäjille mahdollisuuden lisätä toiminnallisuutta verkkoselaimiin, olla vuorovaikutuksessa verkkosivujen kanssa ja integroitua verkkopalveluihin. Tämä opas tarjoaa kattavan yleiskatsauksen selainlaajennusten kehitykseen, keskittyen Manifest V3:een ja ydin-JavaScript-rajapintoihin, jotka antavat näille laajennuksille voiman.
Selainlaajennusten ymmärtäminen
Selainlaajennus on pieni ohjelmisto, joka laajentaa verkkoselaimen toiminnallisuutta. Laajennukset voivat muokata verkkosivuja, lisätä uusia ominaisuuksia ja integroitua ulkoisiin palveluihin. Ne on tyypillisesti kirjoitettu JavaScriptillä, HTML:llä ja CSS:llä, ja ne on pakattu ZIP-tiedostoon manifestitiedoston kanssa, joka kuvaa laajennuksen metatiedot ja luvat.
Suosittuja käyttökohteita selainlaajennuksille ovat:
- Mainostenesto-ohjelmat: Poistavat mainoksia verkkosivuilta.
- Salasanojen hallintaohjelmat: Tallentavat ja hallitsevat salasanoja turvallisesti.
- Tuottavuustyökalut: Parantavat työnkulkua ominaisuuksilla, kuten tehtävienhallinta ja muistiinpanot.
- Sisällön mukauttaminen: Muokkaavat verkkosivujen ulkoasua ja käyttäytymistä.
- Saavutettavuustyökalut: Parantavat verkon saavutettavuutta vammaisille käyttäjille.
Manifest V3: Uusi standardi
Manifest V3 on selainlaajennuksen manifestitiedoston uusin versio. Manifestitiedosto on JSON-tiedosto, joka kuvaa laajennuksen metatiedot, luvat ja resurssit. Se tuo merkittäviä muutoksia laajennusten kehitysprosessiin, keskittyen pääasiassa parannettuun turvallisuuteen, yksityisyyteen ja suorituskykyyn. Keskeisiä muutoksia Manifest V3:ssa ovat:
- Service Workerit: Korvaavat taustasivut service workereilla paremman suorituskyvyn ja pienemmän muistinkulutuksen saavuttamiseksi. Service workerit ovat tapahtumapohjaisia skriptejä, jotka ajetaan taustalla ja käsittelevät tapahtumia, kuten verkkopyyntöjä ja hälytyksiä.
- Declarative Net Request API: Korvaa estävän webRequest API:n Declarative Net Request API:lla verkkopyyntöjen suodattamiseen. Tämä parantaa yksityisyyttä ja turvallisuutta rajoittamalla laajennuksen pääsyä verkkoliikenteeseen.
- Content Security Policy (CSP): Ottaa käyttöön tiukemmat CSP-käytännöt mielivaltaisen koodin suorittamisen estämiseksi ja turvallisuusriskien pienentämiseksi.
- Manifestin versio:
manifest_version-avaimen arvoksimanifest.json-tiedostossa on asetettava 3.
Siirtyminen Manifest V2:sta Manifest V3:een
Siirtyminen Manifest V2:sta Manifest V3:een vaatii huolellista suunnittelua ja koodimuutoksia. Tässä on vaiheittainen opas:
- Päivitä manifestitiedosto: Aseta
manifest_versionarvoon 3 ja päivitäpermissions- jabackground-kentät vastaamaan Manifest V3:n vaatimuksia. - Korvaa taustasivut service workereilla: Kirjoita taustaskriptit uudelleen service workereiksi, käsittelemällä tapahtumia
chrome.scripting- jachrome.alarms-rajapinnoilla. - Siirry Declarative Net Request API:hin: Korvaa estävät
webRequest-API-kutsut deklaratiivisilla säännöillä, jotka määritelläändeclarativeNetRequest-API:ssa. - Päivitä sisällön turvallisuuskäytäntö: Muokkaa
content_security_policy-kenttää manifestitiedostossa vastaamaan tiukempia CSP-vaatimuksia. - Testaa perusteellisesti: Testaa laajennusta laajasti eri selaimissa varmistaaksesi yhteensopivuuden ja oikean toiminnallisuuden.
Esimerkki: Taustaskriptin siirtäminen Service Workeriksi
Manifest V2 (background.js):
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
return {cancel: true};
},
{urls: ["*.example.com/*"]},
["blocking"]
);
Manifest V3 (service-worker.js):
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [1],
addRules: [{
"id": 1,
"priority": 1,
"action": { "type": "block" },
"condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
}]
});
manifest.json (Manifest V3):
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0",
"description": "A simple extension",
"permissions": [
"declarativeNetRequest",
"declarativeNetRequestFeedback",
"storage"
],
"background": {
"service_worker": "service-worker.js"
},
"declarative_net_request": {
"rule_resources": [{
"id": "ruleset_1",
"enabled": true,
"path": "rules.json"
}]
}
}
Keskeiset JavaScript-rajapinnat selainlaajennuksille
Selainlaajennukset tukeutuvat joukkoon JavaScript-rajapintoja vuorovaikutuksessa selaimen ja verkkosivujen kanssa. Tässä on joitakin tärkeimmistä rajapinnoista:
1. chrome.runtime
chrome.runtime-rajapinta antaa pääsyn laajennuksen ajonaikaiseen ympäristöön. Se mahdollistaa laajennusten kommunikoinnin taustaskriptin kanssa, pääsyn manifestitiedostoon ja laajennuksen elinkaaren hallinnan.
Tärkeimmät metodit:
chrome.runtime.sendMessage(): Lähettää viestin taustaskriptille tai muille laajennuksille.chrome.runtime.onMessage.addListener(): Kuuntelee viestejä muista skripteistä.chrome.runtime.getManifest(): Palauttaa laajennuksen manifestitiedoston JavaScript-objektina.chrome.runtime.reload(): Lataa laajennuksen uudelleen.
Esimerkki: Viestin lähettäminen sisältöskriptistä taustaskriptiin
Sisältöskripti (content.js):
chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
console.log("Response from background script: ", response.message);
});
Taustaskripti (service-worker.js):
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log("Message from content script: ", request.message);
sendResponse({message: "Hello from background script!"});
}
);
2. chrome.storage
chrome.storage-rajapinta tarjoaa mekanismin tietojen tallentamiseen ja hakemiseen laajennuksessa. Se tarjoaa sekä paikallisen että synkronoidun tallennusvaihtoehdon.
Tärkeimmät metodit:
chrome.storage.local.set(): Tallentaa tiedot paikallisesti.chrome.storage.local.get(): Hakee tiedot paikallisesta tallennustilasta.chrome.storage.sync.set(): Tallentaa tiedot, jotka synkronoidaan käyttäjän laitteiden välillä.chrome.storage.sync.get(): Hakee tiedot synkronoidusta tallennustilasta.
Esimerkki: Tietojen tallentaminen ja hakeminen paikallisesta tallennustilasta
// Tallenna tiedot
chrome.storage.local.set({key: "value"}, function() {
console.log("Value is set to " + "value");
});
// Hae tiedot
chrome.storage.local.get(["key"], function(result) {
console.log("Value currently is " + result.key);
});
3. chrome.tabs
chrome.tabs-rajapinta antaa laajennusten olla vuorovaikutuksessa selaimen välilehtien kanssa. Se tarjoaa metodeja välilehtien luomiseen, kyselyyn, muokkaamiseen ja sulkemiseen.
Tärkeimmät metodit:
chrome.tabs.create(): Luo uuden välilehden.chrome.tabs.query(): Hakee välilehtiä, jotka vastaavat tiettyjä kriteerejä.chrome.tabs.update(): Päivittää välilehden ominaisuuksia.chrome.tabs.remove(): Sulkee välilehden.chrome.tabs.executeScript(): Suorittaa JavaScript-koodin välilehdessä.
Esimerkki: Uuden välilehden luominen
chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
console.log("New tab created with ID: " + tab.id);
});
4. chrome.alarms
chrome.alarms-rajapinta antaa laajennusten ajastaa tehtäviä suoritettavaksi tiettyyn aikaan tai tietyn aikavälin jälkeen. Tämä on erityisen tärkeää Manifest V3:ssa, koska se korvaa ajastimien käytön taustasivuilla, joita ei enää tueta.
Tärkeimmät metodit:
chrome.alarms.create(): Luo uuden hälytyksen.chrome.alarms.get(): Hakee olemassa olevan hälytyksen.chrome.alarms.clear(): Poistaa hälytyksen.chrome.alarms.getAll(): Hakee kaikki hälytykset.chrome.alarms.onAlarm.addListener(): Kuuntelee hälytystapahtumia.
Esimerkki: Hälytyksen luominen
chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});
chrome.alarms.onAlarm.addListener(function(alarm) {
if (alarm.name === "myAlarm") {
console.log("Alarm triggered!");
}
});
5. chrome.scripting
chrome.scripting-rajapinta antaa laajennusten injektoida JavaScriptiä ja CSS:ää verkkosivuille. Tämä rajapinta on keskeinen osa Manifest V3:a, ja service workerit käyttävät sitä vuorovaikutukseen verkkosivujen kanssa niiden latauduttua.
Tärkeimmät metodit:
chrome.scripting.executeScript(): Suorittaa JavaScript-koodin välilehdessä tai kehyksessä.chrome.scripting.insertCSS(): Lisää CSS:ää välilehteen tai kehykseen.
Esimerkki: JavaScriptin injektoiminen välilehteen
chrome.scripting.executeScript({
target: {tabId: tabId},
function: function() {
console.log("Injected script!");
document.body.style.backgroundColor = 'red';
}
});
6. chrome.notifications
chrome.notifications-rajapinta antaa laajennusten näyttää ilmoituksia käyttäjälle. Tämä on hyödyllistä päivitysten, hälytysten ja muiden tärkeiden tietojen antamiseen.
Tärkeimmät metodit:
chrome.notifications.create(): Luo uuden ilmoituksen.chrome.notifications.update(): Päivittää olemassa olevan ilmoituksen.chrome.notifications.clear(): Poistaa ilmoituksen.chrome.notifications.getAll(): Hakee kaikki ilmoitukset.
Esimerkki: Ilmoituksen luominen
chrome.notifications.create('myNotification', {
type: 'basic',
iconUrl: 'icon.png',
title: 'My Extension',
message: 'Hello from my extension!'
}, function(notificationId) {
console.log('Notification created with ID: ' + notificationId);
});
7. chrome.contextMenus
chrome.contextMenus-rajapinta antaa laajennusten lisätä kohteita selaimen pikavalikkoon (hiiren oikean napin valikko). Tämä tarjoaa käyttäjille kätevän tavan päästä käsiksi laajennuksen toimintoihin suoraan verkkosivuilta.
Tärkeimmät metodit:
chrome.contextMenus.create(): Luo uuden pikavalikon kohdan.chrome.contextMenus.update(): Päivittää olemassa olevan pikavalikon kohdan.chrome.contextMenus.remove(): Poistaa pikavalikon kohdan.chrome.contextMenus.removeAll(): Poistaa kaikki laajennuksen luomat pikavalikon kohdat.
Esimerkki: Pikavalikon kohdan luominen
chrome.contextMenus.create({
id: "myContextMenuItem",
title: "My Context Menu Item",
contexts: ["page", "selection"]
}, function() {
console.log("Context menu item created.");
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId === "myContextMenuItem") {
console.log("Context menu item clicked!");
alert("You clicked the context menu item!");
}
});
8. chrome.i18n
chrome.i18n-rajapintaa käytetään laajennuksen kansainvälistämiseen, mikä tekee siitä saavutettavan eri kielillä ja alueilla oleville käyttäjille. Sen avulla voit tarjota lokalisoituja versioita laajennuksesi käyttöliittymästä ja viesteistä.
Tärkeimmät metodit:
chrome.i18n.getMessage(): Hakee lokalisoidun merkkijonon laajennuksen_locales-hakemistosta.
Esimerkki: chrome.i18n:n käyttö lokalisointiin
Luo ensin _locales-hakemisto laajennuksesi juurikansioon. Luo sen sisään kielikohtaiset kansiot, kuten en, es, fr jne.
Luo jokaisen kielikansion sisään messages.json-tiedosto. Esimerkiksi _locales/en/messages.json-tiedostossa:
{
"extensionName": {
"message": "My Extension",
"description": "The name of the extension."
},
"greetingMessage": {
"message": "Hello, world!",
"description": "A simple greeting message."
}
}
Sitten JavaScript-koodissasi:
let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Tulos: My Extension
console.log(greeting); // Tulos: Hello, world!
Selainyhteensopivuus
Vaikka Chrome on suosituin selain laajennuskehityksessä, on tärkeää ottaa huomioon selainyhteensopivuus. Myös Firefox, Safari ja muut selaimet tukevat laajennuksia, mutta niiden rajapinnat ja manifestiformaatit voivat hieman erota.
Varmistaaksesi selainyhteensopivuuden:
- Käytä WebExtensions API:a: WebExtensions API on standardoitu rajapinta selainlaajennusten kehitykseen, jota useat selaimet tukevat.
- Testaa eri selaimissa: Testaa laajennuksesi eri selaimissa yhteensopivuusongelmien tunnistamiseksi ja korjaamiseksi.
- Käytä polyfill-kirjastoja: Käytä polyfill-kirjastoja tarjotaksesi puuttuvaa API-toiminnallisuutta eri selaimissa.
- Ehdollinen koodi: Käytä ehdollista koodia mukautuaksesi selainkohtaisiin eroihin. Esimerkiksi:
if (typeof browser === "undefined") { var browser = chrome; }
Parhaat käytännöt selainlaajennusten kehityksessä
Tässä on joitakin parhaita käytäntöjä, joita noudattaa selainlaajennuksia kehitettäessä:
- Minimoi käyttöoikeudet: Pyydä vain niitä käyttöoikeuksia, joita laajennuksesi ehdottomasti tarvitsee. Tämä parantaa käyttäjän yksityisyyttä ja turvallisuutta.
- Käytä turvallisia koodauskäytäntöjä: Noudata turvallisia koodauskäytäntöjä haavoittuvuuksien, kuten sivustojen välisen komentosarja-ajon (XSS) ja koodin injektoinnin, estämiseksi.
- Optimoi suorituskyky: Optimoi laajennuksesi suorituskyky minimoidaksesi sen vaikutuksen selaimen suorituskykyyn.
- Tarjoa selkeä ja ytimekäs dokumentaatio: Tarjoa selkeä ja ytimekäs dokumentaatio auttaaksesi käyttäjiä ymmärtämään, kuinka laajennustasi käytetään.
- Käsittele virheet siististi: Toteuta virheidenkäsittely estääksesi laajennuksesi kaatumisen tai odottamattoman käyttäytymisen.
- Pidä laajennuksesi ajan tasalla: Päivitä laajennustasi säännöllisesti korjataksesi bugeja, tietoturva-aukkoja ja yhteensopivuusongelmia.
- Harkitse kansainvälistämistä (i18n): Suunnittele laajennuksesi niin, että se on helposti lokalisoitavissa eri kielille. Käytä
chrome.i18n-rajapintaa. - Kunnioita käyttäjän yksityisyyttä: Ole läpinäkyvä sen suhteen, miten laajennuksesi kerää ja käyttää käyttäjätietoja, ja hanki käyttäjän suostumus tarvittaessa. Noudata asiaankuuluvia tietosuojasäännöksiä, kuten GDPR ja CCPA.
Laajennuksen lähettäminen kauppoihin
Kun laajennuksesi on kehitetty ja testattu, haluat lähettää sen selainten laajennuskauppoihin, jotta se on käyttäjien saatavilla. Jokaisella selaimella on oma kauppansa ja lähetysprosessinsa:
- Chrome Web Store: Lähetä laajennuksesi Chrome Web Storeen Chrome-käyttäjille. Prosessi sisältää kehittäjätilin luomisen, laajennuksen pakkaamisen ja sen lataamisen kauppaan.
- Firefox Add-ons: Lähetä laajennuksesi Firefox Add-ons -sivustolle Firefox-käyttäjille. Prosessi on samanlainen kuin Chrome Web Storessa ja sisältää kehittäjätilin luomisen ja laajennuksen lähettämisen tarkistettavaksi.
- Safari Extensions Gallery: Lähetä laajennuksesi Safari Extensions Galleryyn Safari-käyttäjille. Prosessi vaatii kehittäjäsertifikaatin hankkimisen Applelta ja laajennuksen lähettämisen tarkistettavaksi.
Kun lähetät laajennuksesi, muista antaa tarkat ja täydelliset tiedot, mukaan lukien kuvaava nimi, yksityiskohtainen kuvaus, kuvakaappaukset ja tietosuojakäytäntö. Laajennuskaupat tarkistavat lähetykset varmistaakseen, että ne noudattavat niiden käytäntöjä ja ohjeita.
Yhteenveto
Selainlaajennusten kehitys Manifest V3:n ja JavaScript-rajapintojen avulla tarjoaa tehokkaan tavan mukauttaa ja parantaa selauskokemusta. Ymmärtämällä ydinkäsitteet, noudattamalla parhaita käytäntöjä ja ottamalla huomioon selainyhteensopivuuden, kehittäjät voivat luoda arvokkaita ja mukaansatempaavia laajennuksia käyttäjille ympäri maailmaa. Verkon kehittyessä selainlaajennuksilla on jatkossakin tärkeä rooli internetin tulevaisuuden muovaamisessa.
Muista aina asettaa käyttäjän yksityisyys ja turvallisuus etusijalle laajennuksia kehittäessäsi. Rakentamalla näiden periaatteiden mukaisesti voit luoda laajennuksia, jotka ovat sekä hyödyllisiä että luotettavia.
Tämä opas tarjoaa vankan perustan selainlaajennusten kehityksen aloittamiseen. Syventyessäsi aiheeseen, tutustu erilaisiin saatavilla oleviin rajapintoihin ja ominaisuuksiin ja kokeile erilaisia tekniikoita luodaksesi innovatiivisia ja vaikuttavia laajennuksia.